<template>
	<div class="fooddetail">
		<div class="fooddetail_contain">
			<el-breadcrumb class="dire" separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>活动管理</el-breadcrumb-item>
				<el-breadcrumb-item>活动列表</el-breadcrumb-item>
				<el-breadcrumb-item>活动详情</el-breadcrumb-item>
			</el-breadcrumb>
			<div class="fooddetail_contain_up">

				<el-card class="fcu_img">
					<img></img>

				</el-card>

				<el-card class="fcu_desc">
					<div class="fcu_desc_foodname">水煮鱼</div>

					<el-rate class="fcu_desc_rate" v-model="value" disabled show-score text-color="#ff9900" score-template="{value}">
					</el-rate>

					<div class="fcu_desc_sale">月销量：20</div>

					<div class="hr" />

					<el-card class="fcu_desc_desc">
						挺不错的，经济实惠，中午去吃的，有位置，进店之前团购的，非常
						可以，口感不错，还有茶水喝，也不算腻歪～有空来吃冷
						面。。。。。。。哈哈哈哈哈哈哈哈。经济实惠，强烈推
						荐，带小孩吃也可以，有婴儿餐椅！还有小孩玩具。
					</el-card>

				</el-card>
			</div>

			<div class="fooddetail_contain_down">

				<div class="fcd_all"><span>12条网友点评</span></div>

				<el-card class="fcd_comments">
					<!--评论排序-->
					<div style="margin-top: 10px;margin-bottom: 10px">
						<el-radio-group v-model="radio2" size="medium">
							<el-radio-button label="按时间"></el-radio-button>
							<el-radio-button label="按质量"></el-radio-button>
							<el-radio-button label="只看带图"></el-radio-button>
						</el-radio-group>
					</div>

					<!--单个评论里布局-->
					<div class="fcd_comm" shadow="never">

						<div class="fcd_comm_pic">
							<div class="pic">
								<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="60"> </el-avatar>
							</div>
						</div>

						<div class="fcd_comm_comm">
							<div class="fcd_comm_name">小明明</div>
							<el-rate class="fcd_comm_rate" v-model="value" disabled show-score text-color="#ff9900" score-template="{value}">
							</el-rate>
							<div class="fcd_comm_date">2020-04-23</div>
							<div class="fcd_comm_text">
								挺不错的，经济实惠，中午去吃的，有位置，进店之前团购的，非常
								可以，口感不错，还有茶水喝，也不算腻歪～有空来吃冷
								面。。。。。。。哈哈哈哈哈哈哈哈。经济实惠，强烈推
								荐，带小孩吃也可以，有婴儿餐椅！还有小孩玩具。
							</div>
							<div class="hr" />
						</div>

					</div>
				</el-card>
			</div>
		</div>

		<div class="fooddetail_shop">
			<el-card class="box-card">
				<div>
					<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
				</div>
				<el-divider></el-divider>
				<div class="text item">
					<router-link to="">历史订单</router-link>
				</div>
				<div class="text item">
					<router-link to="">我的红包</router-link>
				</div>
				<div class="text item">
					<router-link to="">个人地址</router-link>
				</div>
			</el-card>

			<el-card class="box-card">
				<div class="head">咚咚哒哒美食</div>
				<div class="tel">电话：13166557766</div>
				<div class="dress">地址：沈阳市浑南区白塔街道东北大学浑南校区</div>
			</el-card>

		</div>

	</div>

</template>

<script>
	export default {
		name: 'FoodDetail',
		data() {
			return {
				value: 3.7,
				src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
			}
		},
		methods: {
			load() {
				this.count += 2
			}
		}
	}
</script>

<style lang="less">
	.fooddetail {
		height: 100%;
		width: 1200px;
		margin: 0 auto;
		display: flex;


		.fooddetail_contain {
			flex: 5;
			display: flex;
			flex-direction: column;

			.fooddetail_contain_up {
				flex: 1;
				//background-color: lightblue;
				display: flex;

				.fcu_img {
					flex: 0.618;

				}

				//右上菜品信息
				.fcu_desc {
					flex: 1;
					background-color: white;

					//菜品名称
					.fcu_desc_foodname {
						font-family: "Helvetica Neue";
						font-size: 36px;
						color: gray; //字体颜色
						font-weight: 400; //加粗
					}

					//菜品评价打分
					.fcu_desc_rate {
						display: inline;

					}

					//菜品月销量
					.fcu_desc_sale {
						display: inline;
						float: right;
					}

					//菜品描述
					.fcu_desc_desc {

						margin-top: 30px;
						font-family: "Helvetica Neue";
						font-size: 14px;
						line-height: 22px;
						color: gray; //字体颜色
						font-weight: 400; //加粗
						letter-spacing: .1em;

					}

				}
			}

			//显示评论内容
			.fooddetail_contain_down {
				flex: 1;

				//background-color: lightpink;
				//有34条评论
				.fcd_all {
					display: inline;
					margin-top: 50px;
					margin-bottom: 10px;
				}

				//评论大卡片
				.fcd_comments {
					width: 100%;
					margin-top: 20px;

					//单个评论
					.fcd_comm {
						width: 100%;
						padding-top: 10px;
						display: flex;

						//flex-direction: column;
						//单个评论用户头像
						.fcd_comm_pic {
							flex: 1;
							//background-color: lightblue;
							display: flex;

							.pic {
								margin: 0 auto;
							}
						}

						//右边评论内容
						.fcd_comm_comm {
							flex: 6.18;
							//background-color: lightpink;
							font-weight: 400; //加粗
							letter-spacing: .1em;

							//用户姓名
							.fcd_comm_name {
								font-family: "Helvetica Neue";
								font-size: 18px;
								line-height: 26px;
								color: #303133; //字体颜色

							}

							//评分
							.fcd_comm_rate {
								display: inline;
							}

							//评论日期
							.fcd_comm_date {
								display: inline;
								float: right;
								font-family: "Helvetica Neue";
								font-size: 14px;
								line-height: 16px;
								color: #909399; //字体颜色

							}

							//评论内容
							.fcd_comm_text {
								font-family: "Helvetica Neue";
								font-size: 14px;
								line-height: 16px;
								color: #606266; //字体颜色
								letter-spacing: 1px;
							}
						}
					}
				}
			}
		}



		.fooddetail_shop {
			flex: 1;

			//background-color:lightpink;
			.box-card {
				width: 80%;
				margin: 18% auto;
				background-color: lightgray;

				.text {
					font-size: 14px;
				}

				.item {
					padding: 18px 0;
				}

			}
		}

		.hr {
			border-bottom: 1px solid #e6e6e6;
			height: 0px;
			padding-bottom: 10px;
		}

		.dire {
			margin-top: 10px;
			margin-bottom: 10px;
		}

		.head {
			margin-top: 10px;
			margin-bottom: 10px;
			font-family: "Helvetica Neue";
			font-size: 18px;
			line-height: 26px;
			color: #303133; //字体颜色
		}

		.tel {
			margin-top: 10px;
			margin-bottom: 10px;
			font-family: "Helvetica Neue";
			font-size: 14px;
			line-height: 16px;
			color: #606266; //字体颜色
			letter-spacing: 1px;
		}

		.dress {
			margin-top: 10px;
			margin-bottom: 10px;
			font-family: "Helvetica Neue";
			font-size: 14px;
			line-height: 16px;
			color: #606266; //字体颜色
			letter-spacing: 1px;
		}
	}
</style>
